<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>优当阅读</title>
	<link rel="stylesheet" type="text/css" href="../plug/swiper/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="../plug/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
	<link rel="stylesheet" type="text/css" href="../font/iconfont.css">
</head>
<!-- 注意body的class -->
<body class="bg_gray">
	<!-- 加载层 -->
	<div class="load_contain m_flex_box flex_vc flex_hc">
		<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
   		 	<g fill="none" fill-rule="evenodd">
        		<g transform="translate(2 1)" stroke="#FFF" stroke-width="1.5">
		            <circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="1;0;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;1;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;1;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;1;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;1;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;1;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;1;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="5" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;0;1" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		        </g>
		    </g>
		</svg>
	</div>
	<div class="cover_opc swiper_cover"></div>
	<div class="pos_r">
		<!-- 头部 -->
		<nav class="top_nav m_flex_box flex_jz flex_vc">
			<a href="javascript:history.go(-1)" class="">
				<i class="iconfont icon-left"></i>
			</a>
			<a href="" class="nav_search m_flex_box flex_vc flex_hc">
				<i class="iconfont icon-sousuo"></i>
				<span>书名、作者、关键词</span>
			</a>
			<a href="">
				<i class="iconfont icon-more"></i>
			</a>
		</nav>
		<div class="tab_choose m_flex_box flex_vc">
			<div class="swiper-container tab_swiper flex-1">
		        <div class="swiper-wrapper">
		            <div  class="swiper-slide active">
						<p class="swiper_text">经营励志</p>
		            </div>
		            <div  class="swiper-slide">
						<p class="swiper_text">科技</p>
		            </div>
		            <div  class="swiper-slide">
						<p class="swiper_text">文艺</p>
		            </div>
		            <div  class="swiper-slide">
						<p class="swiper_text">人文社科</p>
		            </div>
		            <div  class="swiper-slide">
						<p class="swiper_text">经营励志</p>
		            </div>
		        </div>
			</div>
			<div class="tab_choose_right">
				<img src="../img/down.png">
				<div class="tab_choose_right_down">
					<div class="tab_down_inner active">
						<span>经营励志</span>
					</div>
					<div class="tab_down_inner">
						<span>科技</span>
					</div>
					<div class="tab_down_inner">
						<span>文艺</span>
					</div>
					<div class="tab_down_inner">
						<span>人文社科</span>
					</div>
					<div class="tab_down_inner">
						<span>经营励志</span>
					</div>
				</div>
				<div class="tab_choose_right_down_lsft">
					<p>为你精选以下分类</p>
				</div>
			</div>
		</div>
	</div>
	<div class="padd_top2"></div>
	<div class="book_show_list">
		<div class="swiper-container how_list_swiper flex-1">
	        <div class="swiper-wrapper good_recommend_contain">
	        	<div class="swiper-slide m_flex_box flex_jz flex_vw swiper_b">
	        		<dl class="good_recommend_contain_dl">
		    			<a href="book_detail.html">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
		    		<dl class="good_recommend_contain_dl">
		    			<a href="book_detail.html">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
		    		<dl class="good_recommend_contain_dl">
		    			<a href="book_detail.html">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
		    		<dl class="good_recommend_contain_dl">
		    			<a href="">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
	        	</div>
	        	<div class="swiper-slide m_flex_box flex_jz flex_vw swiper_b">
	        		<dl class="good_recommend_contain_dl">
		    			<a href="book_detail.html">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
		    		<dl class="good_recommend_contain_dl">
		    			<a href="book_detail.html">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
		    		<dl class="good_recommend_contain_dl">
		    			<a href="book_detail.html">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
	        	</div>
	        	<div class="swiper-slide m_flex_box flex_jz flex_vw swiper_b">
	        		<dl class="good_recommend_contain_dl">
		    			<a href="book_detail.html">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
		    		<dl class="good_recommend_contain_dl">
		    			<a href="book_detail.html">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
	        	</div>
	        	<div class="swiper-slide m_flex_box flex_jz flex_vw swiper_b">
	        		<dl class="good_recommend_contain_dl">
		    			<a href="book_detail.html">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
		    		<dl class="good_recommend_contain_dl">
		    			<a href="">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
	        	</div>
	        	<div class="swiper-slide m_flex_box flex_jz flex_vw swiper_b">
	        		<dl class="good_recommend_contain_dl">
		    			<a href="">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
		    		<dl class="good_recommend_contain_dl">
		    			<a href="">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
		    		<dl class="good_recommend_contain_dl">
		    			<a href="">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
		    		<dl class="good_recommend_contain_dl">
		    			<a href="">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
		    		<dl class="good_recommend_contain_dl">
		    			<a href="">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
		    		<dl class="good_recommend_contain_dl">
		    			<a href="">
		    				<dt>
			    				<img data-src="../img/1.png" class="swiper-lazy">
			    				<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
			    			</dt>
			    			<dd>三国影碟2：无所荆州</dd>
		    			</a>
		    		</dl>
	        	</div>
	        </div>
		</div>
	</div>
     <a href="book_sc.html" class="body_bottom">
    	<div class="body_bottom_inner"></div>
    </a>
	<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../js/public.js"></script>
	<script type="text/javascript" src="../plug/layui/layui.all.js"></script>
	<script type="text/javascript" src="../plug/lazy/jquery.lazyload.min.js"></script>
	<script type="text/javascript" src="../js/clamp.min.js"></script>
	<script type="text/javascript" src="../plug/swiper/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" src="../js/reset_font.js"></script>
	<script type="text/javascript">

		/*流加载*/
		var dom = '<dl class="good_recommend_contain_dl">'
    				+'<a href="book_detail.html">'
    				+'<dt>'
    				+'<img src="../img/1.png" class="lazy" data-original="../img/book.png">'
	    			+'</dt>'
    				+'</a>'
	    			+'<dd>三国影碟2：无所荆州三国影碟2：无所荆州三国影碟2：无所荆州</dd>'
    				+'</dl>';
		layui.use('flow', function(){
			var how_list_swiper;
			var tab_swiper;
		    var _index=0;
		    var flow = layui.flow; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
		    for(var j = 0;j<$(".how_list_swiper .swiper-slide").length;j++){
		    	$(".how_list_swiper .swiper-slide").eq(j).attr("id","swiper"+j)
		    }
		    // swiper自适应高度延迟加载
		    setTimeout(function(){
		    	tab_swiper = new Swiper('.tab_swiper', {
			        scrollbarHide: true,
			        slidesPerView: 'auto',
			        spaceBetween: 0,
			        grabCursor: true
			    });
		    	how_list_swiper = new Swiper('.how_list_swiper', {
		    		onInit:function(){
		    			console.log(how_list_swiper)
		    		},
		    		onSlideChangeStart: function(){
				      	_index= how_list_swiper.activeIndex;
				      	$(".tab_swiper").find(".swiper-slide").eq(_index).addClass("active").siblings().removeClass("active");
						$(".tab_choose_right_down").find(".tab_down_inner").eq(_index).addClass("active").siblings().removeClass("active");
						tab_swiper.slideTo(_index, 300,false);
						swip();
						$(".how_list_swiper").css("height",$("#swiper"+_index).css("height"));
					},
			        pagination: '.swiper-pagination',
			        paginationClickable: true,
			        nextButton: '.swiper-button-next',
			        prevButton: '.swiper-button-prev',
			        autoHeight: true, //enable auto height
			        preloadImages: true,
			        // Enable lazy loading
			        lazyLoading: true
		    	});
		    },500);
		    /*tab栏切换*/
			$("body").on("click",".tab_swiper .swiper-slide",function(){
				var that = $(this);
				_index = $(this).index();
				Tab(that,".tab_choose_right_down",".tab_down_inner",_index,".tab_swiper",".swiper-slide");
				tab_swiper.slideTo(_index, 300,false);
				how_list_swiper.slideTo(_index, 300,false);
				swip();
			});
			// 下拉按钮控制滑动
			$("body").on("click",".tab_down_inner",function(){
				var that = $(this);
				_index = $(this).index();
				Tab(that,".tab_swiper",".swiper-slide",_index,".tab_choose_right_down",".tab_down_inner");
				tab_swiper.slideTo(_index, 300,false);
				how_list_swiper.slideTo(_index, 300,false);
				swip();
			});
			function Tab(that,contain,contain_inner,_index,con,con_inner){
				that.addClass("active").siblings().removeClass("active");
				$(contain).find(contain_inner).eq(_index).addClass("active").siblings().removeClass("active");
				$(con).find(con_inner).eq(_index).addClass("active").siblings().removeClass("active");
				$(".how_list_swiper").css("height",$("#swiper"+_index).css("height"));
			}

			// 流加载
			swip();
		    function swip(){
		    	flow.load({
				    elem: '#swiper'+_index //流加载容器
				    ,done: function(page, next){ //执行下一页的回调
				      //模拟数据插入
					    setTimeout(function(){
				        	var lis = [];
					        for(var i = 0; i < 8; i++){
				          		lis.push(dom);
					        }
					        next(lis.join(''), page < 10); //假设总页数为 10
					        /*图片预加载*/
				      		$(".how_list_swiper").css("height",$("#swiper"+_index).css("height"));
					        lazyImg();
				      	}, 500);
			    	}
			  	});
		    }
		});
		/*tab右侧按钮下拉效果*/
		$(".tab_choose_right").click(function(){
			$(".tab_choose_right_down").toggle(200);
			$(".swiper_cover").fadeToggle(200);
			$(".tab_choose_right img").toggleClass("active");
			$(".tab_choose_right_down_lsft").toggleClass("active");
		})
		// 图片预加载
		function lazyImg(){
			$("img.lazy").lazyload({
	      		effect: "fadeIn",
	      		skip_invisible:false,
		    });
		};
		lazyImg();
	</script>
</body>
</html>